import React from 'react';
import { useGame } from '../GameContext';
import { motion } from 'framer-motion';

const GameStats: React.FC = () => {
  const { state } = useGame();
  const { money, reputation } = state;

  // 计算声誉的星级表示
  const getStars = (reputation: number) => {
    const stars = [];
    const fullStars = Math.floor(reputation / 20);
    const hasHalfStar = reputation % 20 >= 10;
    
    // 添加实心星星
    for (let i = 0; i < fullStars; i++) {
      stars.push(<span key={`full-${i}`} className="text-yellow-400">★</span>);
    }
    
    // 添加半星
    if (hasHalfStar) {
      stars.push(<span key="half" className="text-yellow-400 relative">
        ★
        <span className="absolute top-0 left-0 w-1/2 overflow-hidden text-gray-300">★</span>
      </span>);
    }
    
    // 添加空星
    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
    for (let i = 0; i < emptyStars; i++) {
      stars.push(<span key={`empty-${i}`} className="text-gray-300">★</span>);
    }
    
    return stars;
  };

  return (
    <motion.div 
      className="game-card flex items-center space-x-8"
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div className="flex items-center space-x-2">
        <motion.span 
          className="text-2xl" 
          animate={{ rotate: [0, 5, 0, -5, 0] }}
          transition={{ repeat: Infinity, duration: 2 }}
        >
          💰
        </motion.span>
        <span className="text-xl font-bold text-green-600">${money}</span>
      </div>
      
      <div className="flex items-center space-x-2">
        <span className="text-2xl">⭐</span>
        <div className="flex space-x-1">
          {getStars(reputation)}
        </div>
      </div>
    </motion.div>
  );
};

export default GameStats;